/*============================================================================
  Typography defaults
==============================================================================*/

/*================ Default ================*/
body {
  margin: 0;
  padding: 0;
  background: $color-sky;
  font-family: $font-body-family;
  font-size: $font-body-size;
  color: $font-body-color;
  font-weight: $font-weight-regular;
  -webkit-font-smoothing: antialiased;

  @include shopify-breakpoint($tablet-down) {
    font-size: em(15);
  }
}

/*================ Headers ================*/
h1,
h2,
h3,
h4,
h5 {
  margin-top: 0;
}

h1,
.heading--1 {
  @include font-brandon-medium();
  @include opentype-features-display();
  display: block;
  margin-bottom: $h1-margin-bottom;
  color: $color-slate;
  font-size: $h1-font-size;
  line-height: $h1-line-height;
  font-weight: $h1-font-weight;

  @include shopify-breakpoint($tablet-only) {
    font-size: $h1-font-size--tablet;
  }

  @include shopify-breakpoint($mobile) {
    font-size: $h1-font-size--mobile;
  }
}


h2,
.heading--2 {
  @include font-brandon-medium();
  @include opentype-features-display();
  display: block;
  margin-bottom: $h2-margin-bottom;
  color: $color-slate;
  font-size: $h2-font-size;
  line-height: $h2-line-height;
  font-weight: $h2-font-weight;

  @include shopify-breakpoint($tablet-only) {
    font-size: $h2-font-size--tablet;
  }

  @include shopify-breakpoint($mobile) {
    font-size: $h2-font-size--mobile;
  }
}

h3,
.heading--3 {
  @include font-brandon-light();
  display: block;
  font-size: $h3-font-size;
  margin-bottom: $h3-margin-bottom;
  color: $color-slate;
  line-height: $h3-line-height;
  font-weight: $h3-font-weight;

  @include shopify-breakpoint($tablet-only) {
    font-size: $h3-font-size--tablet;
  }

  @include shopify-breakpoint($mobile) {
    font-size: $h3-font-size--mobile;
  }
}

h4,
.heading--4 {
  @include font-brandon-medium();
  display: block;
  margin-bottom: $h4-margin-bottom;
  color: $color-slate;
  font-size: $h4-font-size;
  line-height: $h4-line-height;
  font-weight: $h4-font-weight;

  @include shopify-breakpoint($tablet-down) {
    font-size: $h4-font-size--tablet;
  }
}

h5,
.heading--5 {
  @include font-brandon-black();
  display: block;
  margin-bottom: $h5-margin-bottom;
  color: $color-slate;
  font-size: $h5-font-size;
  line-height: $h5-line-height;
  font-weight: $h5-font-weight;
  text-transform: uppercase;
  letter-spacing: $h5-letter-spacing;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: $color-grey-body;
}

/*============================================================================
  Body Copy
==============================================================================*/
.txt--minor {
  font-size: em(14);
  line-height: em(20, 14);
}

.txt--major {
  @include font-brandon-light();
  font-size: em(19);
}

.body-link {
  padding-bottom: em(3, 16);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  color: $color-green;
  transition: border-color 150ms ease-in-out;

  &:hover,
  &:focus {
    border-bottom-color: transparent;
  }
}

main {
  p,
  ul,
  ol {
    margin-bottom: em($gutter / 2);
    line-height: em(24);
    font-size: em(16);
  }

  p > a {
    @extend .body-link;
  }
}

.marketing-quote {
  margin: $gutter 0;
}

.marketing-quote__content {
  @include font-brandon-light();
  margin: 0;
  padding: em(16, 24) 0 em(16, 24) $gutter;
  font-size: em(24);
  color: $color-black;
  border-left: solid 2px $color-sky;
}

.marketing-quote__footer {
  text-align: right;
}

.marketing-quote__cite {
  font-style: normal;
}

// Should be removed, but too many deps
.heading-container {
  text-align: center;
}

.section-intro {
  @include clearfix;
  border: 1px solid rgba($color-black, 0.2);
  border-width: 1px 0;
  padding: em(36) 0;
}

/*============================================================================
  Lowlight Typography
==============================================================================*/
.lowlight__heading {
  // scss-lint:disable ImportantRule
  color: $color-white !important;
  // scss-lint:enable ImportantRule
}

.lowlight__quote {
  border-color: $color-grey-text--light;
}

/*============================================================================
  Lists
==============================================================================*/
.numbered-list {
  list-style: decimal;
  list-style-position: outside;
  margin-left: 2.5em;

  li {
    margin-bottom: 0.5em;
  }
}
